<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="k" uri="/WEB-INF/k.tld"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>怀才进销存管理软件 - 销售前台</title>
		<jsp:include page="../inc.jsp"></jsp:include>
		<script type="text/javascript" src="../My97DatePicker/WdatePicker.js"></script>
		<SCRIPT language="JavaScript" type="text/javascript" src="../web/js/hdm.js"></SCRIPT>
		<script type="text/javascript" src="../jslib/date.js"></script>
		<script type="text/javascript" src="../jslib/jquery.util.js"></script>
		<script type="text/javascript" src="../jslib/jquery.table.js"></script>
		<link href="../web/css/style.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			.tabRefresh a{
				display: inline-block;
				font-size: 1px;
				height: 12px;
				opacity: 0.6;
				width: 12px;
			}
			
			.tabRefresh a:hover{
				background-color:#8DB2E3;
				cursor: pointer;
				opacity: 1;
			}
		</style>
		<SCRIPT>
		var calendar;
		$(function(){
			
			$('#uid').val('${sessionInfo.userId}');
			var repertory = '${sessionInfo.repertoryIds}';
			if(repertory&&$('#rid').find('option').length>1){
				$('#rid').find('option').eq(1).attr('selected','selected');
			}
			
			$('#date').val((new Date()).pattern("yyyy-MM-dd"));
			
			calendar = $('#calendar').calendar({
				fit : true,
				current : new Date(),
				border : false,
				onSelect : function(date) {
					$(this).calendar('moveTo', new Date());
				}
			});
			
			$('#mMobile').keydown(function(e){
				var key = (e.keyCode) || (e.which) || (e.charCode);
				if(key == '13'&&$('#mMobile').val().trim().length>0){
					$.ajax({
						url : '${pageContext.request.contextPath}/hygl/memberAction!noAuth_combobox.html',
						data : {mobile : $('#mMobile').val()},
						dataType : 'JSON',
						type : 'POST',
						success : function(d){
							if(d.length>0){
								$('#mid').val(d[0].id);
								$('#mtid').val(d[0].tid);
								$('#point').val(d[0].point);
								
								$('#consumePoint').html('');
								for(var i = 0;i*3000<=Number(d[0].point);i++){
									$('#consumePoint').append('<option value="'+i*3000+'">'+i*3000+'</option>');
								}
							}else{
								$('#mMobile').val('');
								sy.messagerAlert('提示', '未找到该会员，建议您新增会员！', 'error');
							}
						}
					});
				}
			});
			
			$('#searchBarcode').keydown(function(e){
				var key = (e.keyCode) || (e.which) || (e.charCode);
				if(key == '13'&&$('#searchBarcode').val().trim().length>0){
					_search();
				}
			});
			
			$('#searchType').keydown(function(e){
				var key = (e.keyCode) || (e.which) || (e.charCode);
				if(key == '13'&&$('#searchType').val().trim().length>0){
					_search();
				}
			});
			
			$('#consumePoint').change(function(){
				$('#consumePoint').charge();
			});
			
			$('#realPay').keydown(function(e){
				var key = (e.keyCode) || (e.which) || (e.charCode);
				if(key == '13'&&$('#realPay').val().trim().length>0){
					$('#realPay').charge();
				}
			});
		});
		
		function logout(){
			sy.messagerConfirm('请确认', '您确定要退出前台销售？', function(r) {
				if(r){
					$.ajax({
						url : '${pageContext.request.contextPath}/loginAction!logout.html',
						type : 'get',
						success:function(){
							self.location.reload();
							if(window.opener){
								opener.location = opener.location;
							}
							window.close();
						}
					});
				}
			});
		}
		
		function _search() {
			if($('#rid').val().length<1){
				$('#rid')[0].focus();
				sy.messagerAlert('提示', '请选择出货仓库！', 'error');
				return;
			}else{
				$('#searchRid').val($('#rid').val());
			}
			
			if($('#searchBarcode').val().trim().length<1&&$('#searchType').val().trim().length<1)
				return;
				
			$('#searchForm').form('submit', {
				url : '${pageContext.request.contextPath}/spgl/goodsAction!noAuth_noPageDatagrid.html',
				success : function(d) {
					var json = $.parseJSON(d);
					if(json.length>0){
						$('#saleGoods').addRow({
							td:[
								{text:json[0].id,hidden:true},
								{text:json[0].barcode},
								{text:json[0].name},
								{text:json[0].size+'/'+json[0].color},
								{text:'￥'+json[0].showPrice},
								{text:$.multiply(json[0].discountNum,100)},
								{text:'1',editable:true},
								{text:'￥'+$.multiply(json[0].showPrice,json[0].discountNum)}
							]
						});
					}else{
						$('#searchBarcode').val('');
						$('#searchType').val('');
						sy.messagerShow({
							msg : '当前仓库中不存在此商品!',
							title : '提示'
						});
					}
				}
			});
			cleanSearch();
		}
		
		function cancelAll(){
			sy.messagerConfirm('请确认', '您确定要取消此次销售，之前输入所有数据将会丢失？', function(r) {
				if(r){
					self.location.reload();
				}
			});
		}
		
		function submitSale(){
			if(!$('#saleForm').form("validate"))
				return;
			
			sy.messagerConfirm('请确认', '您确定要结算？', function(r) {
				if(r){
					$('#saleGoods').grandTable();
					if($('#Charge').val()<0){
						sy.messagerAlert('提示', '该客户还未付清款项！', 'error');
						return;
					}
					
					$('#remarkBak').val(encodeURIComponent($('#remark').val()));
					
					$('#saleForm').form('submit', {
						url : '${pageContext.request.contextPath}/xsgl/salelistAction!noAuth_add.html',
						success : function(d) {
							var json = $.parseJSON(d);
							sy.messagerShow({
								msg : json.msg,
								title : '提示'
							});
							self.location.reload();
						}
					});
					
				}
			});
		}
		
		function createMember(){
			if(!$('#memberForm').form("validate"))
				return;
			
			sy.messagerConfirm('请确认','您确认要新增该会员?',function(r){
				if(r){
					$('#name').val(encodeURIComponent($('#name').val()));
					$('#mRemark').val(encodeURIComponent($('#mRemark').val()));
					$('#address').val(encodeURIComponent($('#address').val()));
					$('#memberForm').form('submit', {
						url : '${pageContext.request.contextPath}/hygl/memberAction!add.html',
						success : function(d) {
							closeDiv();
							var json = $.parseJSON(d);
							$('#mMobile').val(json.obj.mobile);
							$('#mid').val(json.obj.id);
							$('#mtid').val(json.obj.tid);
							$('#point').val(json.obj.point);
							
							$.ajax({
								url : '${pageContext.request.contextPath}/serial!noAuth_serial.html',
								data : {sign : 'HY'},
								type : "POST",
								success : function(d){
									$('#memSerial').val(d);
								}
							});
							
							$('#consumePoint').html('');
							for(var i = 0;i*3000<=Number(json.obj.point);i++){
								$('#consumePoint').append('<option value="'+i*3000+'">'+i*3000+'</option>');
							}
							sy.messagerAlert('新增会员成功', '您新增的会员信息如下：<br/><br/>办卡日期：'+json.obj.openDate+'<br/>会员编号：'+json.obj.serial+'<br/>会员姓名：'+json.obj.name+'<br/>目前消费：'+json.obj.consume+'<br/>初始积分：'+(json.obj.point?json.obj.point:'0')+'<br/>会员地址：'+(json.obj.address?json.obj.address:''), 'info');							
						}
					});
				}
			});	
		}
		</SCRIPT>
	</head>

	<body>
		<div class="top">
			<div class="logo">
				<img src="../web/imgs/htlogo.jpg" width="480" height="47" />
			</div>
			<div class="right">
				欢迎您！${sessionInfo.loginName} [${sessionInfo.roleNames}]
				<a href="javascript:void(0)" onclick="logout()">退出登录</a>
				<a href="#">修改密码</a>
			</div>
		</div>
		<div class="content">
			<div class="right">
				<!--日历标题-->
				<div class="title">
					<img src="../web/imgs/pic1.gif" width="6" height="6" />
					日历
				</div>
				<!--/日历标题-->
				<!--日历-->
				<div style="height:180px;">
					<div id="calendar"></div>
				</div>
				<!--/日历-->
				<!--公告+提醒-->
				<div class="title">
					<ul>
						<li id="cp1" class="cpover" onMouseOver="setTab_('cp',1,5,'cpover')">
							公告<span class="tabRefresh"><a href="javascript:void(0);" onclick="javascript:document.frames('announcementIframe').location.reload()" class="icon-mini-refresh"></a></span>
						</li>
						<li id="cp2" onMouseOver="setTab_('cp',2,5,'cpover')">
							系统提醒<span class="tabRefresh"><a href="javascript:void(0);" onclick="javascript:document.frames('warnIframe').location.reload()" class="icon-mini-refresh"></a></span>
						</li>
					</ul>
				</div>
				<div class="conts">
					<div id="cp_con1">
						<iframe width="100%" scrolling="auto" frameborder="0" onload="javascript:void(0);" name="announcementIframe" id="announcementIframe" src="${pageContext.request.contextPath}/qtmk/announcementAction!noAuth_tabAnnounce.html"></iframe>
					</div>
					<div id="cp_con2" style="display: none;">
						<iframe width="100%" scrolling="no"  frameborder="0" onload="javascript:void(0);" name="warnIframe" id="warnIframe" src="${pageContext.request.contextPath}/qtmk/remindWarnAction!noAuth_tabRemindWarn.html"></iframe>
					</div>
				</div>
				<!--/公告+提醒-->
			</div>
			<div class="left">
				<div class="nav">
					<ul>
						<k:security key="XSGL_QTXS">
						<li>
							<a href="${pageContext.request.contextPath}/xsgl/sale.html">
								<img src="${pageContext.request.contextPath}/web/imgs/navxsgl.jpg" width="104" height="35" /> 
							</a>
						</li>
						</k:security>
						<k:security key="XSGL_XSTH">
						<li>
							<a href="${pageContext.request.contextPath}/xsgl/saleReturn.html">
								<img src="${pageContext.request.contextPath}/web/imgs/nav-xsth.jpg" width="104" height="35" /> 
							</a>
						</li>
						</k:security>
						<k:security key="XSGL_KCCX">
						<li>
							<a href="${pageContext.request.contextPath}/xsgl/amount.html">
								<img src="${pageContext.request.contextPath}/web/imgs/nav-kcgl.jpg" width="104" height="35" /> 
							</a>
						</li>
						</k:security>
						<k:security key="XSGL_HYGL">
						<li>
							<a href="${pageContext.request.contextPath}/xsgl/member.html">
								<img src="${pageContext.request.contextPath}/web/imgs/nav-hygl.jpg" width="104" height="35" /> 
							</a>
						</li>
						</k:security>
						<k:security key="XSGL_RJQS">
						<li>
							<a href="${pageContext.request.contextPath}/xsgl/settlement.html">
								<img src="${pageContext.request.contextPath}/web/imgs/nav-rjqs.jpg" width="104" height="35" /> 
							</a>
						</li>
						</k:security>
						<k:security key="XSGL_XSJLCX">
						<li>
							<a href="${pageContext.request.contextPath}/xsgl/salelist.html">
								<img src="../web/imgs/navxsglcx.jpg" height="35" /> 
							</a>
						</li>
						</k:security>
					</ul>
				</div>
				<div class="cont"><div style=" overflow: hidden;">
					<!--营业员信息-->
					<form id='saleForm'>
					<input type='hidden' id='Items' name='items' value=''/>
					<input type='hidden' id='Total' name='total' value=''/>
					<input type='hidden' id='RealPay' name='realPay' value=''/>
					<input type='hidden' id='Charge' name='charge' value=''/>
					<input type='hidden' id='Point' name='point' value=''/>
					
					<table border="0" cellspacing="4" class="table" >
						<tr>
							<td width="90" align="right" class="lanse">
								营 业 员：
							</td>
							<td >
								<label for="select"></label>
								<select name="uid" class="width1 easyui-validatebox" id="uid" data-options="required:'true',missingMessage:'请选择营业员'">
									<option value="">&nbsp;</option>
								<c:forEach items="${VUsers}" var="VUser">
									<option value="${VUser.id }">${VUser.username }</option>
								</c:forEach>
								</select>
							</td>
							<td width="72" align="right" class="lanse">
								销售日期：
							</td>
							<td >
								<input id="date" name='date'  onClick="WdatePicker()" class='easyui-validatebox' data-options="required:'true',missingMessage:'请选择销售时间'"/>
							</td>
							<td width="72" align="right" class="lanse">
								销售单号：
							</td>
							<td >
								<input name="serial" type="text" class="input1 easyui-validatebox" readonly="readonly" id="serial"  value="${serial }" data-options="required:'true',missingMessage:'请输入销售单号'"/>
							</td>
							<td rowspan="3" valign="top" class="addvip">
								<a href="javascript:showDiv()"><img src="../web/imgs/addvip.jpg" width="104" height="100" /> </a>
							</td>
						</tr>
						<tr>
							<td align="right">
								会员：
							</td>
							<td>
								<label for="textfield"></label>
								<input name="mMobile" type="text" class="input1" id="mMobile" /><input name="mid" type="hidden" id="mid" />
							</td>
							<td align="right">
								会员积分：
							</td>
							<td>
								<input type="text" class="input1" value='0' id="point" readonly="readonly"/>
							</td>
							<td align="right">
								会员类型：
							</td>
							<td>
								<select name="mtid" class="mtid" id="mtid">
									<option value=''>&nbsp;</option>
									<c:forEach items="${VMemberTypes}" var="VMemberType">
										<option value='${VMemberType.id }'>${VMemberType.name }</option>
									</c:forEach>
								</select>
							</td>
						</tr>
						<tr>
							<td align="right" valign="top">
								备&nbsp;&nbsp;&nbsp;&nbsp;注：
							</td>
							<td colspan="3">
								<label for="textarea"></label>
								<textarea id="remark" cols="38" rows="2"></textarea>
								<textarea name="remark" id="remarkBak" style="display:none;"></textarea>
							</td>
							<td align="right" valign="top" class="lanse">
								出货仓库：
							</td>
							<td valign="top">
								<select name="rid" class="width1 easyui-validatebox" id="rid" data-options="required:'true',missingMessage:'请选择出货仓库'">
									<option value=''></option>
									<c:forEach items="${VRepertories}" var="VRepertory">
										<option value='${VRepertory.id }'>${VRepertory.name }</option>
									</c:forEach>
								</select>
							</td>
						</tr>
					</table>
					</form>
					<!--/营业员信息-->
					<!--销售单信息-->
					<div style="height:185px; OVERFLOW-Y: auto; OVERFLOW-X:hidden;">
						<table border="1" bordercolor="#eee" cellpadding="0" id="saleGoods" cellspacing="0" class="table info" style="border-collapse: collapse">
							<tr class="title">
								<td style="border:none;" >
									&nbsp;
								</td>
								<td style="border:none;">
									编号/条形码
								</td>
								<td>
									品名
								</td>
								<td>
									规格
								</td>
								<td>
									单价
								</td>
								<td>
									折扣率
								</td>
								<td>
									数量
								</td>
								<td>
									金额
								</td>
							</tr>
						</table>
					</div>
					<!--/销售单信息-->
					<!--手动输入货单信息-->
					<form id="searchForm">
						<input type='hidden' id='searchRid' name='rid'/>
						<table border="0" cellpadding="4" class="table huodanxx">
							<tr>
								<td width="100" align="right">
									条形码：
								</td>
								<td width="240">
									<input name="barcode" type="text" class="input1" id="searchBarcode" />
								</td>
								<td width="69" align="right">
									款号：
								</td>
								<td width="240">
									<input name="type" type="text" class="input1" id="searchType" />
								</td>
								<td>
									<a href="#">
										<img src="../web/imgs/anniu4.gif" width="20" height="20" onclick="_search()"/> 
									</a>
								</td>
							</tr>
						</table>
					</form>
					<!--/手动输入货单信息-->
					<!--结算-->
					<div class="jiesuan">
						<div class="leftjs">
							<h2>
								总计：￥<span id='totalPaySpan'>0.00</span>
							</h2>
							商品数量：<span id='totalGoodsSpan'>0</span> 售价：￥<span id='totalMoneySpan'>0.00</span> 折扣：￥<span id='totalDiscountSpan'>0.00</span>
							<br />
							本次积分：<span id='PointSpan'>0</span> 累计积分：<span id='totalPointSpan'>0</span>
							<a href="#" class="button1 dis_block">会员信息 >></a>
						</div>
						<div class="centjs">
							<table width="100%" border="0" class="jsxx">
								<tr>
									<td>应收：</td>
									<td>
										￥<input name="shouldPay" type="text" class="input1" id="shouldPay" value="0.00" readonly="readonly" />
									</td>
									<td>
										<select name="select5" class="width2 " id="select5">
											<option>
												现金
											</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>收款：</td>
									<td>
										￥<input name="realPay" type="text" class="input1" id="realPay" value="" />
									</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>积分：</td>
									<td>
										点<select name="consumePoint" class="input1" id="consumePoint">
											<option value='0'>0</option>
										</select>
									</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>找零：</td>
									<td>
										￥<input name="charge" type="text" class="input1" id="charge" value="0.00" readonly="readonly" />
									</td>
									<td>&nbsp;</td>
								</tr>
							</table>
						</div>
						<div class="rightjs">
							<ul>
								<li>
									<a href="javascript:void(0);" onclick="submitSale()" class="button2 dis_block">结算打印</a>
								</li>
								<li>
									<a href="javascript:void(0);" onclick="cancelAll()" class="button3 dis_block">取 消</a>
								</li>
							</ul>
						</div>
					</div>
					<!--/结算--></div>
				</div>
			</div>
		</div>
		<!-- 
		<div class="foot">
			Copyright @ 2012 huaicai.com 浙ICP备10000000号<br />杭州怀才商贸有限公司 服务电话：400-000-0000
		</div>
		 -->
		<script language="javascript" type="text/javascript">
		function showDiv(){
			$('#mRemark').val($('#rid :selected').text());
			document.getElementById('popDiv').style.display='block';
			document.getElementById('popIframe').style.display='block';
			document.getElementById('bg').style.display='block';
		}
		function closeDiv(){
			document.getElementById('popDiv').style.display='none';
			document.getElementById('bg').style.display='none';
			document.getElementById('popIframe').style.display='none';
			document.getElementById('memberForm').reset();
		}
		</script>
		<!--弹出框信息-->
		<div id="popDiv" class="mydiv" style="display: none;">
			<div class="title">
				<a href="javascript:closeDiv()">关闭窗口</a>新增会员
			</div>
			<div class="cont">
				<form id="memberForm">
				<table width="100%" border="0">
					<tr>
					    <td align="right">办卡日期：<br></td>
					    <td><input type="text" id="openDate" class="input1 easyui-validatebox" onClick="WdatePicker()" name="openDate" data-options="required:'true',missingMessage:'请选择办卡日期'"/><br></td>
					    <td align="right">会员编号：<br></td>
					    <td><input type="text" id="memSerial" value="${memSerial }" readonly="readonly" class="input1 easyui-validatebox" name="serial"><br></td>
					    <td align="right">客户姓名：<br></td>
					    <td><input id="name" class="input1 easyui-validatebox" name="name" data-options="required:'true',missingMessage:'请输入客户姓名'"><br></td>
					  </tr>
					  <tr>
					    <td align="right">会员类别：<br></td>
					    <td>
					    	<select name="tid" class="input1 easyui-validatebox" id="tid" data-options="required:'true',missingMessage:'请选择会员类型'">
									<c:forEach items="${VMemberTypes}" var="VMemberType">
										<option value='${VMemberType.id }'>${VMemberType.name }</option>
									</c:forEach>
								</select>
						<br></td>
					    <td align="right">手机：<br></td>
					    <td><input type="text" id="mobile" class="input1" name="mobile"><br></td>
					    <td align="right">农历生日：<br></td>
					    <td><input type="text" id="birthdayA" class="input1" onClick="WdatePicker()" name="birthdayA"><br></td>
					  </tr>
					  <tr>
					    <td align="right">阳历生日：<br></td>
					    <td><input type="text" id="birthdayB" class="input1" onClick="WdatePicker()" name="birthdayB"><br></td>
					    <td align="right">消费金额：<br></td>
					    <td><input type="text" id="consume" class="input1" name="consume" value='0' readonly='readonly'><br></td>
					    <td align="right">积分：<br></td>
					    <td><input type="text" id="point" class="input1" name="point" value='0'><br></td>
					  </tr>
					  <tr>
					    <td align="right">客户分类：<br></td>
					    <td>
					    	<select name="ctId" class="input1" id="ctId">
								<c:forEach items="${VCustomerTypes}" var="VCustomerType">
									<option value='${VCustomerType.id }'>${VCustomerType.name }</option>
								</c:forEach>
							</select>
					    <br></td>
					    <td align="right">地址<br></td>
					    <td colspan="3"><input type="text" id="address" class="input1" name="address" value='' style="width:80%;"><br></td>
					  </tr>
					  <tr>
					    <td align="right">备注：<br></td>
					    <td  colspan="5"><textarea name="remark" id="mRemark" cols="58" rows="5"></textarea><br></td>
				      </tr>
					  <tr>
					    <td  colspan="5">&nbsp;<br></td>
					    <td><a href="javascript:void(0);" onclick="createMember()" class="button2 dis_block">添加</a><br></td>
					  </tr>
				</table>
				</form>
			</div>
		</div>
		<div id="bg" class="bg" style="display: none;"></div>
		<iframe id='popIframe' class='popIframe' frameborder='0'></iframe>
	</body>
</html>
